<template>
  <view class="page">
    <UserDate/>
    <u-tabs class="pos" :list="tabs" :current="act" :is-scroll="false" :active-color="themeColor" @change="change"/>
    
    <view class="tcard">
      <view class="title flexR">
        肾脏超声检查
        <view class="tig_status success">
          候诊中
        </view>
      </view>
      
      <view class="tform">
        <view class="item">
          <view class="label">
            预约时间：
          </view>
          <view class="value">
            2024-09-12 11:00:0
          </view>
        </view>
        <view class="item">
          <view class="label">
            预约科室：
          </view>
          <view class="value">
            介入超声
          </view>
        </view>
        <view class="item">
          <view class="label">
            就诊位置：
          </view>
          <view class="value">
            门诊辅楼三楼
            <view class="pst flexC" @click="$router.push('/pages/navInHsp/navInHsp')">
              <img :src="`${$store.state.baseApi}/icon/way.png`" alt="">
              路线
            </view>
          </view>
        </view>
        <view v-show="act" class="item">
          <view class="label">
            检查序号：
          </view>
          <view class="value">
            10
          </view>
        </view>
      </view>
      
      <view class="line"></view>
      
      <view class="">
        <view class="btn" @click="toSignin">
          去报道
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import UserDate from '@/components/UserInfo/user-date.vue'
  import { themeColor } from '@/static/js/theme.js'
  export default {
    components: {UserDate},
    data() {
      return {
        themeColor,
        tabs:[
          {name: '未报到'},
          {name: '已报到'}
        ],
        act: 0
      }
    },
    methods: {
      change(index) {
      	this.act = index;
      },
      toSignin() {
        uni.navigateTo({
          url: `./signin`
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.pos {
  width: 100vw;
  position: sticky;
  top: 0;
  left: -32upx;
  transform: translateY(-32upx);
  margin-left: -32upx;
  margin-right: -32upx;
  z-index: 9;
}
.title {
  justify-content: space-between;
}
.item {
  display: flex;
  margin-bottom: 16upx;
  .label {
    flex-shrink: 0;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28upx;
    color: rgba(0,0,0,0.5);
    line-height: 44upx;
  }
  .value {
    flex: 1;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28upx;
    color: rgba(0,0,0,0.7);
    line-height: 44upx;
    position: relative;
    .pst {
      align-items: center;
      float: right;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24upx;
      color: $theme-color;
      line-height: 44upx;
      // transform: translateX(8upx);
      margin-left: -8upx;
      margin-right: -8upx;
      margin-bottom: -16upx;
      >img {
        width: 32upx;
        height: 32upx;
      }
    }
  }
}
.btn {
  margin-left: auto;
  width: 200upx;
  height: 54upx;
  margin-top: 24upx;
  background: $theme-color;
  border-radius: 28upx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 24upx;
  color: #FFFFFF;
  line-height: 54upx;
  text-align: center;
}
</style>
